<template>
	<div class="login">
	<div class="login-container">
		<div class="login-form">
			
			<el-form :model="loginForm" status-icon :rules="loginRules" ref="loginFormRef">
				<div class="title">管理员登录</div>
				<el-form-item prop="account">
					<el-input placeholder="请输入账号" prefix-icon="el-icon-user" v-model="loginForm.account" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input placeholder="请输入密码" prefix-icon="el-icon-key" type="password" v-model="loginForm.password" show-password autocomplete="off"></el-input>
				</el-form-item>
			
				<el-form-item>
					<el-button type="primary" size="medium " class="btn" @click="login()">登陆</el-button>
				</el-form-item>
			</el-form>
			
		</div>
	</div>
	</div>
</template>

<script type="text/javascript">
export default {
	data() { 
			return {				
			  loginForm: {
				  account:'admin',
				  password: '123456'
			  },
			  loginRules: {
					account:[
						{ required: true, message: '请输入账号！', trigger: 'blur'},
						{ min: 5, max: 25, message: '长度在 5 到 25 个字符', trigger: 'blur'}
					],
					password:[
						{ required: true, message: '请输入密码！', trigger: 'blur' },
						{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
					]
			  }
			}		
	},
	methods:{
		login(){
			this.$refs.loginFormRef.validate((valid)=>{
				if(!valid) return;
				//请求登陆
				this.$http.post('login',this.loginForm).then(res=>{					
					if(res.data.code !== 200) return this.$message.error(res.data.msg);					
					this.$message.success(res.data.msg);
					//保存token
					window.sessionStorage.setItem('token',res.data.data.token);
					//跳转
					this.$router.replace('/home');
				}).catch(er=>{
					this.$message.error('无法连接后台接口!')
					console.log(er);
				});
				
				
			});
		}
	}

}
</script>

<style>
.login{
	height: 100%;
	background-color: #249bed;
}	
.login-container {  
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.login-form {
    position: relative;
    width: 500px;
    height: 400px;
	padding: 50px;
}

.title {
    color: #465C98;
    font-size: 28px;
	margin-bottom: 40px;
}
.btn{
	width: 100%;
}	
</style>
